<template>
  <div class="bg" v-loading="loading">
    <van-field v-model="form.area" readonly label="" placeholder="请选择所在地区" @click="addressShow = true" />
    <van-field readonly clickable :value="currentItem.storeName" placeholder="请选择门店" @click="showPicker = true" />
    <template v-if="!columns.length">
      <div class="tip">
        {{ data.outOfRangeTip }}
      </div>
      <div class="code_content">
        <img class="code_img" v-if="data.codeState === 1" src="../../assets/no_code.svg" alt="" />
        <img class="code_img" v-else @touchstart="setStart" @touchend="setEnd" :src="data.customerServiceUrl" alt="" />
      </div>
      <div class="sub-des" v-if="data.codeState !== 1">
        长按识别二维码添加客服
      </div>
    </template>
    <template v-else>
      <div class="tip" style="text-align: center;">
        <van-icon name="location-o" />
        {{ currentItem.address }}
      </div>
      <div class="code_content">
        <!-- <img class="code_img" v-if="value.codeState === 1" src="../../../assets/drainageCode/no_code.svg" alt=""> -->
        <img
          class="code_img"
          @touchstart="setStart"
          @touchend="setEnd"
          v-if="currentItem.shopGuideUrl"
          :src="currentItem.shopGuideUrl"
          alt=""
        />
        <img class="code_img" v-else src="../../assets/no_code.svg" alt="" />
        <!-- <img class="code_img" v-else src="../../../assets/drainageCode/code.png" alt=""> -->
      </div>
      <div class="sub-des" v-if="currentItem.shopGuideUrl">
        长按识别二维码添加门店导购
      </div>
    </template>

    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        value-key="storeName"
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="addressShow" round position="bottom">
      <van-cascader
        v-model="area"
        title="请选择所在地区"
        :options="addressOptions"
        :field-names="{
          text: 'name',
          value: 'name',
        }"
        @close="addressShow = false"
        @finish="selectedArea"
      />
    </van-popup>
  </div>
</template>
<script>
import { getWxCode, getQueryValue, baiduMapError, splitName } from '@/utils/index'
import { getAreaList, getWxTicket } from '@/api/common'
import { getCodeInStore, getCodeBase } from '@/api/groupCode'
export default {
  name: 'store-guide-code',
  data() {
    return {
      loading: false,
      area: '',
      userInfo: {},
      tenantId: '',
      addressOptions: [],
      addressShow: false,
      form: {
        area: '',
        latitude: '',
        longitude: '',
      },
      showPicker: false,
      columns: [],
      value: '',
      data: {
        outOfRangeTip: '',
        codeState: 1,
        customerServiceUrl: '',
      },
      currentItem: {
        storeName: '',
        address: '',
      },
      showTip: false,
      timer: '',
      query: {
        currentLat: '',
        currentLng: '',
        storeCodeId: '',
        unionid: '',
        source: 1,
        tenantId: '',
      },
    }
  },
  methods: {
    setStart() {
      this.timer = setTimeout(() => {
        this.query.storeCodeId = this.currentItem.id
        this.query.unionid = this.userInfo.unionId
        this.query.tenantId = sessionStorage.getItem('tenantId')
        // recordCode(this.query)
      }, 500)
    },
    setEnd() {
      clearTimeout(this.timer)
    },
    selectedArea({ selectedOptions }) {
      this.addressShow = false
      delete this.form.latitude
      delete this.form.longitude
      this.form.area = selectedOptions.map((option) => option.name).join('')
      this.getStoreList()
    },
    getAreaList() {
      getAreaList().then(({ data }) => {
        this.addressOptions = data
      })
    },
    onConfirm(data, index) {
      if (data) {
        this.currentItem = data
      }
      this.showPicker = false
    },
    getStoreList(type) {
      this.loading = true
      getCodeInStore({
        storeCodeType: 1,
        unionid: this.userInfo.unionId,
        longitude: this.form.longitude,
        latitude: this.form.latitude,
        area: this.form.area,
        tenantId: sessionStorage.getItem('tenantId'),
      }).then((res) => {
        if (res.code === 200) {
          this.columns = res.data.weStoreCodes
          if (!this.columns || this.columns.length === 0) {
            this.currentItem = {
              storeName: '',
              address: '',
            }
            this.getNullFn()
          } else {
            if (type) {
              this.currentItem = this.columns[0]
              this.form.area = this.currentItem.area
              let arr = splitName(this.currentItem.area)
              if (arr[2]) {
                this.area = [2]
              }
            } else {
              this.currentItem = this.columns[0]
            }
          }
        }
        this.loading = false
      })
    },
    getNullFn() {
      getCodeBase({
        storeCodeType: 1,
        unionid: this.userInfo.unionId,
        longitude: this.form.longitude,
        latitude: this.form.latitude,
        area: this.form.area,
      }).then((res) => {
        if (res.code === 200 && res.data) {
          this.data = res.data
        }
      })
    },
    back() {
      document.addEventListener(
        'WeixinJSBridgeReady',
        function() {
          WeixinJSBridge.call('closeWindow')
        },
        false,
      )
      WeixinJSBridge.call('closeWindow')
    },
  },
  async mounted() {
    await getWxCode()
    if (getQueryValue('code') && getQueryValue('state')) {
      this.userInfo = JSON.parse(sessionStorage.getItem('userinfo'))
      this.getAreaList()
      let _that = this
      this.loading = true
      getWxTicket(window.location.href.split('#')[0]).then((res) => {
        if (res.code === 200) {
          let { timestamp, nonceStr, signature } = res.data
          wx.config({
            beta: true,
            // debug: true,
            appId: sessionStorage.getItem('weAppId'),
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['getLocation'], //必填
            success: function(res) {},
            fail: (res) => {
              _that.loading = false
              alert('config失败:' + JSON.stringify(res))
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          })
          wx.ready(function() {
            wx.getLocation({
              type: 'wgs84', //默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
              success: function(dd) {
                _that.form.latitude = dd.latitude
                _that.form.longitude = dd.longitude
                _that.query.currentLat = dd.latitude
                _that.query.currentLng = dd.longitude
                _that.getStoreList('init')
              },
              fail: function(ff) {
                // alert(ff.errMsg)
                alert('获取定位位置信息失败')
                _that.loading = false
                // _that.back()
              },
              cancel: function(ff) {
                _that.back()
              },
            })
          })
        }
      })
    }
    // else {
    //   if (getQueryValue('state')) {
    //     this.back()
    //   }
    // }
  },
  created() {
    this.tenantId = this.$route.query.tenantId
    sessionStorage.setItem('tenantId', this.tenantId)
  },
}
</script>
<style lang="less" scoped>
.bg {
  background: linear-gradient(180deg, #eaf5ff 0%, rgba(253, 253, 253, 0) 100%);
  border-radius: 0px 0px 0px 0px;
}
.tip {
  font-size: 12px;
  margin-top: 30px;
  text-align: center;
}
.code_content {
  margin-top: 10px;
  text-align: center;
  .code_img {
    height: 180px;
    width: 180px;
    margin: 10px auto;
  }
}

.sub-des {
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
